/**
 * By Alpha
 * Author: alixez <alixe.z@foxmail.com>
 * Date: 2017/11/3
 */

/* global window */

import React, { Component } from 'react';
import NProgress from 'nprogress';
import PropTypes from 'prop-types';
import pathToRegexp from 'path-to-regexp';
import { connect } from 'dva';
import { Affix } from 'antd';
import { Layouts, Loader } from 'components';
import { classNames, config } from 'utils';
import { Helmet } from 'react-helmet';
import { withRouter } from 'dva/router';
// import 'ant-design-pro/dist/ant-design-pro.css';
import '../themes/index.less';
import './app.less';
import Error from './error';

let { prefix, openPages } = config;

openPages = openPages.map(_ => (typeof _ === 'string' ? _ : _.path));
const { Header, Sider, Layout, styles } = Layouts;

let loadLocationHref = null;

class App extends Component {
  static propTypes = {
    children: PropTypes.element.isRequired,
    location: PropTypes.object,
    dispatch: PropTypes.func,
    app: PropTypes.object,
    loading: PropTypes.object,
  };

  render () {
    const { children, dispatch, app, loading, location } = this.props;
    const { user, collapsed, darkTheme, menu } = app;
    let { pathname } = location;
    // 为 pathname 加上前缀
    pathname = pathname.startsWith('/') ? pathname : `/${pathname}`;
    const { logo } = config;

    // const current = menu.filter(item => pathToRegexp(item.route || '').exec(pathname));
    // const hasPermission = current.length ? permissions.visit.includes(current[0].id) : false;

    const href = window.location.href;

    if (loadLocationHref !== href) {
      NProgress.start();
      if (!loading.global) {
        NProgress.done();
        loadLocationHref = href;
      }
    }

    const headerProps = {
      menu,
      user,
      location,
      // collapsed,
      // isMobile,
      // mobilePopoverVisible,
      // navOpenKeys,
      // handleVisibleChange () {
      //   dispatch({ type: 'app/toggleMenuPopover' });
      // },
      // logout () {
      //   console.log('logout');
      //   dispatch({ type: 'app/logout' });
      // },
      // changeOpenKeys (openKeys) {
      //   dispatch({ type: 'app/handleNavOpenKeys', payload: { navOpenKeys: openKeys } });
      // },
    };

    const siderProps = {
      menu,
      location,
      // collapsed,
      // darkTheme,
      // changeOpenKeys (openKeys) {
      //   window.localStorage.setItem(`${prefix}navOpenKeys`, JSON.stringify(openKeys));
      //   dispatch({ type: 'app/handleNavOpenKeys', payload: { navOpenKeys: openKeys } });
      // },
    };

    // const breadProps = {
    //   menu,
    //   location,
    // };

    if (openPages && openPages.includes(pathname)) {
      return (<div>
        <Loader fullScreen spinning={loading.effects['app/load']} />
        {children}
      </div>);
    }
    return (
      <div>
        <Loader fullScreen spinning={loading.effects['app/load']} />
        <Helmet>
          <title>UNITE | 游离体 </title>
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <link rel="icon" href={logo} type="image/x-icon" />
        </Helmet>

        <Layout className={classNames(styles.layout)}>
          <Header {...headerProps} />
          {/* <Affix className={styles.headerAffix}>
            
          </Affix> */}
          <Layout className={styles.main} >
            {menu.length === 0 ? null : <Sider {...siderProps} />}
            <Layout.Content className={styles.container}>
              <div className={styles.content}>
                {children}
              </div>
            </Layout.Content>
          </Layout>
        </Layout>
      </div>
    );
    // return (
    //   <div>
    //     <Loader fullScreen spinning={loading.effects['app/load']} />
    //     <Helmet>
    //       <title>UNITE | 游离体 </title>
    //       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    //       <link rel="icon" href={logo} type="image/x-icon" />
    //     </Helmet>

    //     <Layout className={classNames(styles.layout)}>

    //       menu.length === 0 ? null : <Sider {...siderProps} />

    //       <Layout className={styles.main} >
    //         <Affix className={styles.headerAffix}>
    //           <Header {...headerProps} />
    //         </Affix>

    //         <Layout.Content className={styles.container}>
    //           <Bread {...breadProps} />
    //           <div className={styles.content}>
    //             {children}
    //           </div>
    //         </Layout.Content>
    //         <Footer />
    //       </Layout>
    //     </Layout>
    //   </div>
    // );
  }
}

export default withRouter(connect(({ app, loading }) => ({ app, loading }))(App));
